<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>商城首页</title>
    <link rel="stylesheet" href="css/swiper-bundle.min.css">

    <link rel="stylesheet" href="assets/iconfont/iconfont.css">
    <link rel="stylesheet" href="css/main.min.css">
    <link rel="stylesheet" href="css/count.css">
    <style>
        .sat {
            width: 205px;
            height: 240px;
            position: fixed;
            top: 87px;
            right: 177px;
            background-color:whitesmoke;
            z-index: 999;
            display: none;
            color: black;
            border: 1px solid orange;

        }
    </style>
</head>

<body>

    <div class="setpos">

        <ul class="nav" style="display: none;">
            <li class="haid">手机</li>
            <li class="haid">耳机音箱</li>
            <li class="haid">智能穿戴</li>
            <li class="haid">智能路由</li>
            <li class="haid">精品平板</li>
            <li class="haid">电脑</li>
            <li class="haid">智慧屏</li>
            <li class="haid">回到顶部</li>


        </ul>
        <div class="sign">
            <p><a href="ShoppingCart.html">购物车</a></p>

            <p>在线客服</p>
            <p>自助服务</p>

        </div>
    </div>

    <header class="indexHead">
        <div class="layout">
            <ol class="headnavlef">
                <li><a href="#">商城首页</a></li>
                <li><a href="http://huawei.com">华为官网</a></li>
                <li><a href="#">花粉俱乐部</a></li>
                <li><a href="#">V码(优购玛)</a></li>
                <li><a href="#">企业购</a></li>
                <li><a href="#">Select</a></li>
                <li><a href="#">更多精彩</a></li>
            </ol>
            <ul id="indexHeadul">
                <li id="token"><a href="http://localhost:777/js0506/dist/login.html">请登录&nbsp;注册</a></li>
                <li><a href="#">我的订单</a></li>
                <li><a href="#">客户服务 <span></span></a></li>
                <li><a href="#">网站导航<span></span></a></li>
                <li><a href="#">手机版<span></span></a></li>
                <li><a href="ShoppingCart.html"> <i class="iconfont icon-gouwuche"></i> <i>购物车</i>
                        <i>(0)</i></a></li>
            </ul>
        </div>
    </header>
    <div class="indexnav">
        <div class="indexnavmain">
            <div class="indexnavlef">
                <a href="index.html"><img src="assets/images/index/logo.png" alt="" class="indexlogo"></a>
                <ul>
                    <li><a href="#" class="huawei"><img src="assets/images/index/huawei.png" alt=""></a></li>
                    <li>莫塞尔专区</li>
                    <li>华为智慧屏</li>
                    <li>智能家居</li>
                    <li>NOVA8系列</li>
                </ul>
            </div>
            <div class="indexnavrig">
                <input type="text" id="searchB" placeholder="Mate x2">
                <span class="iconfont icon-sousuo1"></span>
                <div  id="sat" class="sat">
                    <ul id="listB"></ul>
                </div>
            </div>

        </div>
    </div>
    <div class="swiper-container">
        <div class="swiper-wrapper">
            <div class="swiper-slide"><img src="assets/images/index/01.jpg" alt=""></div>
            <div class="swiper-slide"><img src="assets/images/index/02.jpg" alt=""></div>
            <div class="swiper-slide"><img src="assets/images/index/03.jpg" alt=""></div>
            <div class="swiper-slide"><img src="assets/images/index/04.jpg" alt=""></div>
            <div class="swiper-slide"><img src="assets/images/index/06.png" alt=""></div>
            <div class="swiper-slide"><img src="assets/images/index/07.png" alt=""></div>
            <div class="swiper-slide"><img src="assets/images/index/08.jpg" alt=""></div>
        </div>
        <div class="slidebox"><img src="assets/images/index/bg-slide.png" alt="" class="slide"></div>
        <!-- 如果需要分页器 -->
        <div class="swiper-pagination"></div>

        <!-- 如果需要导航按钮 -->
        <div class="swiper-button-prev"></div>
        <div class="swiper-button-next"></div>

        <!-- 如果需要滚动条 -->
        <!-- <div class="swiper-scrollbar"></div> -->

        <div class="index-cate">
            <ul>
                <li>手机<span class="iconfont icon-redianzuoyouanniu-
                    "></span>
                    <div class="catelist">
                        <dl>
                            <dd><img src="assets/images/mate.png" alt=""></dd>
                            <dt>Mate系列</dt>
                        </dl>
                        <dl>
                            <dd><img src="assets/images/p.png" alt=""></dd>
                            <dt>p系列</dt>
                        </dl>
                        <dl>
                            <dd><img src="assets/images/nova.png" alt=""></dd>
                            <dt>Nova系列</dt>
                        </dl>
                        <dl>
                            <dd><img src="assets/images/honer.png" alt=""></dd>
                            <dt>畅享系列</dt>
                        </dl>
                        <a href="productlist.html" class="catemore">查看更多></a>
                    </div>
                </li>
                <li> 智能穿戴&VR<span class="iconfont icon-redianzuoyouanniu-
                    "></span></li>
                <li>智能音箱眼镜<span class="iconfont icon-redianzuoyouanniu-
                    "></span></li>
                <li>智慧屏<span class="iconfont icon-redianzuoyouanniu-
                    "></span></li>
                <li>电脑<span class="iconfont icon-redianzuoyouanniu-
                    "></span></li>
                <li>平板<span class="iconfont icon-redianzuoyouanniu-
                    "></span></li>
                <li>智能路由<span class="iconfont icon-redianzuoyouanniu-
                    "></span></li>
                <li>配件<span class="iconfont icon-redianzuoyouanniu-
                    "></span></li>
                <li>生态产品<span class="iconfont icon-redianzuoyouanniu-
                    "></span></li>
                <li>美食酒饮<span class="iconfont icon-redianzuoyouanniu-
                    "></span></li>
                <li>增值服务&企业商用<span class="iconfont icon-redianzuoyouanniu-
                    "></span></li>
            </ul>
        </div>
    </div>
    <div class="indexmain">
        <ul>
            <li class="indexf1">
                <dl>
                    <dd><img src="assets/images/userimg.png" alt=""></dd>
                    <dt>
                        <p style="color: #999999;font-size: 14px;">您好！请<span
                                style="font-size: 16px;color: #333333;">登录/注册</span></p>
                        <p class="indexf1p"><span class="newper">新人福利</span><span class="pervip">会员频道</span></p>
                    </dt>
                </dl>
            </li>
            <li class="indexf2">
                <dl>
                    <dd class="onexue"></dd>
                    <dt>
                        <p>企业购</p>
                    </dt>
                </dl>
                <dl>
                    <dd class="twoxue"></dd>
                    <dt>
                        <p>会员领卷</p>
                    </dt>
                </dl>
                <dl>
                    <dd class="thrxue"></dd>
                    <dt>
                        <p>以旧换新</p>
                    </dt>
                </dl>
                <dl>
                    <dd class="fouxue"></dd>
                    <dt>
                        <p>P40系列</p>
                    </dt>
                </dl>
                <dl>
                    <dd class="fivxue"></dd>
                    <dt>
                        <p>智能穿戴</p>
                    </dt>
                </dl>
                <dl>
                    <dd class="sixxue"></dd>
                    <dt>
                        <p>智能家居</p>
                    </dt>
                </dl>
            </li>
            <li class="indexf3">
                <p>
                <h4>公告:</h4><span></span>
                </p>
                <hr>
                <p class="indexf3p">
                    <span>优购码</span>
                    <span>优购码</span>
                    <span>优购码</span>

                </p>
            </li>
        </ul>
    </div>
    <section>
        <ul id="new">
            <li>
                <img src="assets/images/index/img0.png" alt="">
            </li>
            <li>
                <img src="assets/images/index/img1.png" alt="">
            </li>
            <li>
                <img src="assets/images/index/img2.png" alt="">
            </li>
            <li>
                <img src="assets/images/index/img3.png" alt="">
            </li>
        </ul>
        <h2 class="oneh">精品推荐</h2>
        <div class="save">

            <div class="swiper-container" id="smswiper">
                <div class="swiper-wrapper">
                    <div class="swiper-slide">
                        <dl>
                            <dd><img src="assets/images/gt2p.png" alt=""></dd>
                            <dt>
                                <p>华为watch</p>
                                <p>¥1899</p>
                            </dt>
                        </dl>
                        <dl>
                            <dd><img src="assets/images/jinghua.png" alt=""></dd>
                            <dt>
                                <p>华为watch</p>
                                <p>¥1899</p>
                            </dt>
                        </dl>
                        <dl>
                            <dd><img src="assets/images/bookx.png" alt=""></dd>
                            <dt>
                                <p>华为watch</p>
                                <p>¥1899</p>
                            </dt>
                        </dl>
                        <dl>
                            <dd><img src="assets/images/pbj.png" alt=""></dd>
                            <dt>
                                <p>华为watch</p>
                                <p>¥1899</p>
                            </dt>
                        </dl>
                        <dl>
                            <dd><img src="assets/images/buts.png" alt=""></dd>
                            <dt>
                                <p>华为watch</p>
                                <p>¥1899</p>
                            </dt>
                        </dl>
                    </div>
                    <div class="swiper-slide">
                        <dl>
                            <dd><img src="assets/images/gt2p.png" alt=""></dd>
                            <dt>
                                <p>华为watch</p>
                                <p>¥1899</p>
                            </dt>
                        </dl>
                        <dl>
                            <dd><img src="assets/images/jinghua.png" alt=""></dd>
                            <dt>
                                <p>华为watch</p>
                                <p>¥1899</p>
                            </dt>
                        </dl>
                        <dl>
                            <dd><img src="assets/images/bookx.png" alt=""></dd>
                            <dt>
                                <p>华为watch</p>
                                <p>¥1899</p>
                            </dt>
                        </dl>
                        <dl>
                            <dd><img src="assets/images/pbj.png" alt=""></dd>
                            <dt>
                                <p>华为watch</p>
                                <p>¥1899</p>
                            </dt>
                        </dl>
                        <dl>
                            <dd><img src="assets/images/buts.png" alt=""></dd>
                            <dt>
                                <p>华为watch</p>
                                <p>¥1899</p>
                            </dt>
                        </dl>
                    </div>
                    <div class="swiper-slide">
                        <dl>
                            <dd><img src="assets/images/gt2p.png" alt=""></dd>
                            <dt>
                                <p>华为watch</p>
                                <p>¥1899</p>
                            </dt>
                        </dl>
                        <dl>
                            <dd><img src="assets/images/jinghua.png" alt=""></dd>
                            <dt>
                                <p>华为watch</p>
                                <p>¥1899</p>
                            </dt>
                        </dl>
                        <dl>
                            <dd><img src="assets/images/bookx.png" alt=""></dd>
                            <dt>
                                <p>华为watch</p>
                                <p>¥1899</p>
                            </dt>
                        </dl>
                        <dl>
                            <dd><img src="assets/images/pbj.png" alt=""></dd>
                            <dt>
                                <p>华为watch</p>
                                <p>¥1899</p>
                            </dt>
                        </dl>
                        <dl>
                            <dd><img src="assets/images/buts.png" alt=""></dd>
                            <dt>
                                <p>华为watch</p>
                                <p>¥1899</p>
                            </dt>
                        </dl>
                    </div>
                </div>

                <div class="swiper-button-prev" id="newprev"></div>
                <div class="swiper-button-next" id="newnext"></div>

                <!-- 如果需要滚动条 -->

            </div>

        </div>
        <div id="title" class="backstart">
            <span>华为秒杀</span>
            <ul>
                <li>HUAWEI</li>
                <li>Mate系列HUAWEI</li>
                <li>P系列HUAWEI</li>
                <li>nova系列华为畅享系列荣耀</li>
            </ul>
            <p>查看更多<span class="iconfont icon-redianzuoyouanniu-
                "></span></p>
        </div>
        <ul id="list">
            <li>
                <img src="assets/images/cxz.png" alt="">
            </li>
            <li>
                <dl><img src="assets/images/cx20se.png" alt=""></dl>
                <dt>
                    <p>华为畅享20 5G</p>
                    <p>¥1899</p>
                </dt>

            </li>
            <li>
                <dl><img src="assets/images/mate30p.png" alt=""></dl>
                <dt>
                    <p>HUAWEIMate30RS保时捷设计</p>
                    <p>¥12999</p>
                </dt>
            </li>
            <li>
                <dl><img src="assets/images/nova8p.png" alt=""></dl>
                <dt>
                    <p>nova8PRO</p>
                    <p>¥3999</p>
                </dt>
            </li>
            <li>
                <dl><img src="assets/images/cx20p.png" alt=""></dl>
                <dt>
                    <p>HUAWEI畅享20PRO</p>
                    <p>¥1999</p>
                </dt>
            </li>
            </li>
        </ul>

        <ul id="list">
            <li class="count-time">
                <div class="se-kl">
                    <div class="se-cn">限时秒杀</div>
                    <div class="se-en">COUNT DOWN</div>
                    <i class="se-io"></i>
                    <div class="se-info">距离结束还剩</div>
                    <div class="se-count">
                        <div class="se-day"></div>
                        <div class="se-hour"><span class="se-txt">00</span></div>
                        <div class="se-min"><span class="se-txt">00</span></div>
                        <div class="se-sec"><span class="se-txt">00</span></div>
                    </div>
                </div>
            </li>
            <li>
                <dl><img src="assets/images/cx20se.png" alt=""></dl>
                <dt>
                    <p>华为畅享20 5G</p>
                    <p>¥1899</p>
                </dt>

            </li>
            <li>
                <dl><img src="assets/images/mate30p.png" alt=""></dl>
                <dt>
                    <p>HUAWEIMate30RS保时捷设计</p>
                    <p>¥12999</p>
                </dt>
            </li>
            <li>
                <dl><img src="assets/images/nova8p.png" alt=""></dl>
                <dt>
                    <p>nova8PRO</p>
                    <p>¥3999</p>
                </dt>
            </li>
            <li>
                <dl><img src="assets/images/cx20p.png" alt=""></dl>
                <dt>
                    <p>HUAWEI畅享20PRO</p>
                    <p>¥1999</p>
                </dt>
            </li>
            </li>
        </ul>
        <div id="title" class="backstart">
            <span>耳机音箱</span>
            <ul>
                <li>真无限蓝牙耳机</li>
                <li>蓝牙耳机</li>
                <li>有线耳机</li>
                <li>智能音箱</li>
            </ul>
            <p>查看更多<span class="iconfont icon-redianzuoyouanniu-
                "></span></p>
        </div>
        <ul id="list">
            <li>
                <img src="assets/images/cxz.png" alt="">
            </li>
            <li>
                <dl><img src="assets/images/air.png" alt=""></dl>
                <dt>
                    <p>FreeBuds 3</p>
                    <p>¥899</p>
                </dt>

            </li>
            <li>
                <dl><img src="assets/images/air.png" alt=""></dl>
                <dt>
                    <p>FreeBuds 3</p>
                    <p>¥899</p>
                </dt>
            </li>
            <li>
                <dl><img src="assets/images/air.png" alt=""></dl>
                <dt>
                    <p>FreeBuds 3</p>
                    <p>¥899</p>
                </dt>
            </li>
            <li>
                <dl><img src="assets/images/air.png" alt=""></dl>
                <dt>
                    <p>FreeBuds 3</p>
                    <p>¥899</p>
                </dt>
            </li>
            </li>
        </ul>

        <ul id="list">
            <li>
                <img src="assets/images/diannao.png" alt="">
            </li>
            <li>
                <dl><img src="assets/images/air.png" alt=""></dl>
                <dt>
                    <p>FreeBuds 3</p>
                    <p>¥899</p>
                </dt>

            </li>
            <li>
                <dl><img src="assets/images/air.png" alt=""></dl>
                <dt>
                    <p>FreeBuds 3</p>
                    <p>¥899</p>
                </dt>
            </li>
            <li>
                <dl><img src="assets/images/air.png" alt=""></dl>
                <dt>
                    <p>FreeBuds 3</p>
                    <p>¥899</p>
                </dt>
            </li>
            <li>
                <dl><img src="assets/images/air.png" alt=""></dl>
                <dt>
                    <p>FreeBuds 3</p>
                    <p>¥899</p>
                </dt>
            </li>
            </li>
        </ul>
        <div id="title" class="backstart">
            <span>智能穿戴</span>
            <ul>
                <li>智能手表</li>
                <li>智能手环</li>
                <li>智能体脂称</li>
                <li>儿童手表</li>
            </ul>
            <p>查看更多<span class="iconfont icon-redianzuoyouanniu-
                "></span></p>
        </div>
        <ul id="list">
            <li>
                <img src="assets/images/cxz.png" alt="">
            </li>
            <li>
                <dl><img src="assets/images/watch.png" alt=""></dl>
                <dt>
                    <p>WATCH GT 2 Pro</p>
                    <p>¥2688</p>
                </dt>

            </li>
            <li>
                <dl><img src="assets/images/watch.png" alt=""></dl>
                <dt>
                    <p>WATCH GT 2 Pro</p>
                    <p>¥2688</p>
                </dt>
            </li>
            <li>
                <dl><img src="assets/images/watch.png" alt=""></dl>
                <dt>
                    <p>WATCH GT 2 Pro</p>
                    <p>¥2688</p>
                </dt>
            </li>
            <li>
                <dl><img src="assets/images/watch.png" alt=""></dl>
                <dt>
                    <p>WATCH GT 2 Pro</p>
                    <p>¥2688</p>
                </dt>
            </li>
            </li>
        </ul>
        <ul id="list">
            <li>
                <img src="assets/images/diannao.png" alt="">
            </li>
            <li>
                <dl><img src="assets/images/watch.png" alt=""></dl>
                <dt>
                    <p>WATCH GT 2 Pro</p>
                    <p>¥2688</p>
                </dt>

            </li>
            <li>
                <dl><img src="assets/images/watch.png" alt=""></dl>
                <dt>
                    <p>WATCH GT 2 Pro</p>
                    <p>¥2688</p>
                </dt>
            </li>
            <li>
                <dl><img src="assets/images/watch.png" alt=""></dl>
                <dt>
                    <p>WATCH GT 2 Pro</p>
                    <p>¥2688</p>
                </dt>
            </li>
            <li>
                <dl><img src="assets/images/watch.png" alt=""></dl>
                <dt>
                    <p>WATCH GT 2 Pro</p>
                    <p>¥2688</p>
                </dt>
            </li>
            </li>
        </ul>
        <div id="title" class="backstart">
            <span>智能路由</span>
            <ul>
                <li>移动路由</li>
                <li>WIFI放大器</li>
                <li>智能存储</li>
                <li>HiLink生态</li>
            </ul>
            <p>查看更多<span class="iconfont icon-redianzuoyouanniu-
                "></span></p>
        </div>
        <ul id="list">
            <li>
                <img src="assets/images/cxz.png" alt="">
            </li>
            <li>
                <dl><img src="assets/images/luyou.png" alt=""></dl>
                <dt>
                    <p>华为路由Q2S</p>
                    <p>¥599</p>
                </dt>

            </li>
            <li>
                <dl><img src="assets/images/luyou.png" alt=""></dl>
                <dt>
                    <p>华为路由Q2S</p>
                    <p>¥599</p>
                </dt>
            </li>
            <li>
                <dl><img src="assets/images/luyou.png" alt=""></dl>
                <dt>
                    <p>华为路由Q2S</p>
                    <p>¥599</p>
                </dt>
            </li>
            <li>
                <dl><img src="assets/images/luyou.png" alt=""></dl>
                <dt>
                    <p>华为路由Q2S</p>
                    <p>¥599</p>
                </dt>
            </li>
            </li>
        </ul>

        <ul id="list">
            <li>
                <img src="assets/images/diannao.png" alt="">
            </li>
            <li>
                <dl><img src="assets/images/luyou.png" alt=""></dl>
                <dt>
                    <p>华为路由Q2S</p>
                    <p>¥599</p>
                </dt>

            </li>
            <li>
                <dl><img src="assets/images/luyou.png" alt=""></dl>
                <dt>
                    <p>华为路由Q2S</p>
                    <p>¥599</p>
                </dt>
            </li>
            <li>
                <dl><img src="assets/images/luyou.png" alt=""></dl>
                <dt>
                    <p>华为路由Q2S</p>
                    <p>¥599</p>
                </dt>
            </li>
            <li>
                <dl><img src="assets/images/luyou.png" alt=""></dl>
                <dt>
                    <p>华为路由Q2S</p>
                    <p>¥599</p>
                </dt>
            </li>
            </li>
        </ul>
        <div id="title" class="backstart">
            <span>精品平板</span>
            <ul>
                <li>华为matePad系列</li>
                <li>华为M系列</li>
                <li>华为畅享系列</li>
                <li>平板配件</li>
            </ul>
            <p>查看更多<span class="iconfont icon-redianzuoyouanniu-
                "></span></p>
        </div>
        <ul id="list">
            <li>
                <img src="assets/images/cxz.png" alt="">
            </li>
            <li>
                <dl><img src="assets/images/matepad.png" alt=""></dl>
                <dt>
                    <p>MatePad Pro 5G</p>
                    <p>¥5299</p>
                </dt>

            </li>
            <li>
                <dl><img src="assets/images/matepad.png" alt=""></dl>
                <dt>
                    <p>MatePad Pro 5G</p>
                    <p>¥5299</p>
                </dt>

            </li>
            <li>
                <dl><img src="assets/images/matepad.png" alt=""></dl>
                <dt>
                    <p>MatePad Pro 5G</p>
                    <p>¥5299</p>
                </dt>

            </li>
            <li>
                <dl><img src="assets/images/matepad.png" alt=""></dl>
                <dt>
                    <p>MatePad Pro 5G</p>
                    <p>¥5299</p>
                </dt>

            </li>
            </li>
        </ul>

        <ul id="list">
            <li>
                <img src="assets/images/diannao.png" alt="">
            </li>
            <li>
                <dl><img src="assets/images/matepad.png" alt=""></dl>
                <dt>
                    <p>MatePad Pro 5G</p>
                    <p>¥5299</p>
                </dt>

            </li>
            <li>
                <dl><img src="assets/images/matepad.png" alt=""></dl>
                <dt>
                    <p>MatePad Pro 5G</p>
                    <p>¥5299</p>
                </dt>

            </li>
            <li>
                <dl><img src="assets/images/matepad.png" alt=""></dl>
                <dt>
                    <p>MatePad Pro 5G</p>
                    <p>¥5299</p>
                </dt>

            </li>
            <li>
                <dl><img src="assets/images/matepad.png" alt=""></dl>
                <dt>
                    <p>MatePad Pro 5G</p>
                    <p>¥5299</p>
                </dt>

            </li>
            </li>
        </ul>
        <div id="title" class="backstart">
            <span>电脑</span>
            <ul>
                <li>华为MateBook X系列</li>
                <li>华为MateBook D系列</li>
                <li>华为MateBook E系列</li>
                <li>华为商用电脑系列</li>
            </ul>
            <p>查看更多<span class="iconfont icon-redianzuoyouanniu-
                "></span></p>
        </div>
        <ul id="list">
            <li>
                <img src="assets/images/diannao.png" alt="">
            </li>
            <li>
                <dl><img src="assets/images/matebook.png" alt=""></dl>
                <dt>
                    <p>HUAWEI MateBook 14 锐龙版</p>
                    <p>¥5999</p>
                </dt>

            </li>
            <li>
                <dl><img src="assets/images/matebook.png" alt=""></dl>
                <dt>
                    <p>HUAWEI MateBook 14 锐龙版</p>
                    <p>¥5999</p>
                </dt>
            </li>
            <li>
                <dl><img src="assets/images/matebook.png" alt=""></dl>
                <dt>
                    <p>HUAWEI MateBook 14 锐龙版</p>
                    <p>¥5999</p>
                </dt>
            </li>
            <li>
                <dl><img src="assets/images/matebook.png" alt=""></dl>
                <dt>
                    <p>HUAWEI MateBook 14 锐龙版</p>
                    <p>¥5999</p>
                </dt>
            </li>
            </li>
        </ul>

        <ul id="list">
            <li>
                <img src="assets/images/cxz.png" alt="">
            </li>
            <li>
                <dl><img src="assets/images/matebook.png" alt=""></dl>
                <dt>
                    <p>HUAWEI MateBook 14 锐龙版</p>
                    <p>¥5999</p>
                </dt>

            </li>
            <li>
                <dl><img src="assets/images/matebook.png" alt=""></dl>
                <dt>
                    <p>HUAWEI MateBook 14 锐龙版</p>
                    <p>¥5999</p>
                </dt>
            </li>
            <li>
                <dl><img src="assets/images/matebook.png" alt=""></dl>
                <dt>
                    <p>HUAWEI MateBook 14 锐龙版</p>
                    <p>¥5999</p>
                </dt>
            </li>
            <li>
                <dl><img src="assets/images/matebook.png" alt=""></dl>
                <dt>
                    <p>HUAWEI MateBook 14 锐龙版</p>
                    <p>¥5999</p>
                </dt>
            </li>
            </li>
        </ul>
        <div id="title" class="backstart">
            <span>智慧屏</span>
            <ul>
                <li>华为智慧屏V系列</li>
                <li>华为智慧屏S系列</li>
                <li>华为智慧屏X系列</li>
                <li>华为智慧屏B系列</li>
            </ul>
            <p>查看更多<span class="iconfont icon-redianzuoyouanniu-
                "></span></p>
        </div>
        <ul id="list">
            <li>
                <img src="assets/images/diannao.png" alt="">
            </li>
            <li>
                <dl><img src="assets/images/X65.png" alt=""></dl>
                <dt>
                    <p>华为智慧屏X65</p>
                    <p>¥24999</p>
                </dt>

            </li>
            <li>
                <dl><img src="assets/images/X65.png" alt=""></dl>
                <dt>
                    <p>华为智慧屏X65</p>
                    <p>¥24999</p>
                </dt>
            </li>
            <li>
                <dl><img src="assets/images/X65.png" alt=""></dl>
                <dt>
                    <p>华为智慧屏X65</p>
                    <p>¥24999</p>
                </dt>
            </li>
            <li>
                <dl><img src="assets/images/X65.png" alt=""></dl>
                <dt>
                    <p>华为智慧屏X65</p>
                    <p>¥24999</p>
                </dt>
            </li>
            </li>
        </ul>

        <ul id="list">
            <li>
                <img src="assets/images/cxz.png" alt="">
            </li>
            <li>
                <dl><img src="assets/images/X65.png" alt=""></dl>
                <dt>
                    <p>华为智慧屏X65</p>
                    <p>¥24999</p>
                </dt>

            </li>
            <li>
                <dl><img src="assets/images/X65.png" alt=""></dl>
                <dt>
                    <p>华为智慧屏X65</p>
                    <p>¥24999</p>
                </dt>
            </li>
            <li>
                <dl><img src="assets/images/X65.png" alt=""></dl>
                <dt>
                    <p>华为智慧屏X65</p>
                    <p>¥24999</p>
                </dt>
            </li>
            <li>
                <dl><img src="assets/images/X65.png" alt=""></dl>
                <dt>
                    <p>华为智慧屏X65</p>
                    <p>¥24999</p>
                </dt>
            </li>
            </li>
        </ul>


    </section>
    <flowdown>
        <div id="flowdown">
            <p>
                <img src="assets/images/footlogo.png" alt="">
            </p>
            <p>
            <ul>
                <li>隐私声明 服务协议 COOKIES Copyright © 2012-2021 华为终端有限公司 版权所有 粤ICP备19015064号|粤公网安备 44190002003939号</li>
                <li>增值电信业务经营许可证：粤B2-20190762|备案主体编号：44201919072182</li>
            </ul>
            </p>
        </div>
    </flowdown>


    <script src="js/jquery-3.5.1.min.js"></script>
    <script src="js/swiper-bundle.min.js"></script>
    <script src="js/main.min.js"></script>
    <script src="js/nav.js"></script>

    <script>
        var arr = [
            { id: 1001, name: "华为p30" },
            { id: 1002, name: "华为mate40" },
            { id: 1003, name: "华为x65智慧屏" },
            { id: 1004, name: "华为nove8" },
            { id: 1005, name: "华为watch" },
            { id: 1006, name: "华为mate30保时捷设计版" },
            { id: 1007, name: "华为耳机" },
            { id: 1001, name: "华为p40" },
            { id: 1002, name: "华为matebook" },
            { id: 1003, name: "华为x60智慧屏" },
            { id: 1004, name: "华为nove8se" },
            { id: 1005, name: "华为watch GT" },
            { id: 1006, name: "华为mate40" },
            { id: 1007, name: "华为手表" },
            { id: 1007, name: "华为手机" },
        ]
        var input = document.getElementById("searchB");
        var ul = document.getElementById("listB");
        
   
        input.oninput = function () {
            $('#sat').css("display","block") 
            
            ul.innerHTML = arr.reduce(function (value, item) {
                if (item.name.indexOf(input.value) > -1) value += "<li>" + item.name + "</li>";
                return value;
            }, "");
        }

       
           
        

        
       
        


        // oninput输入时显示内容，调用reduce函数，判断在输入内容中与元素是否相同，将元素返回给ul列表内

    </script>



</body>

</html>